<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
	$(function() {
		$('#container').highcharts({
			chart : {
				type : 'area',
				spacingBottom : 30
			},
			title : {
				text : 'Fruit consumption *'
			},
			subtitle : {
				text : '* Jane\'s banana consumption is unknown',
				floating : true,
				align : 'right',
				verticalAlign : 'bottom',
				y : 15
			},
			legend : {
				layout : 'vertical',
				align : 'left',
				verticalAlign : 'top',
				x : 150,
				y : 100,
				floating : true,
				borderWidth : 1,
				backgroundColor : '#FFFFFF'
			},
			xAxis : {
				categories : [ 'Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries' ]
			},
			yAxis : {
				title : {
					text : 'Y-Axis'
				},
				labels : {
					formatter : function() {
						return this.value;
					}
				}
			},
			tooltip : {
				formatter : function() {
					return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y;
				}
			},
			plotOptions : {
				area : {
					fillOpacity : 0.5
				}
			},
			credits : {
				enabled : false
			},
			series : [ {
				name : 'John',
				data : [ 0, 1, 4, 4, 5, 2, 3, 7 ]
			}, {
				name : 'Jane',
				data : [ 1, 0, 3, null, 3, 1, 2, 1 ]
			} ]
		});
	});
</script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
